<!-- src/components/Calendar/CalendarMain.vue -->
<template>
  <main class="calendar-main">
    <!-- 动态加载视图组件 -->
    <component
      :is="currentViewComponent"
      :selected-date="selectedDate"
      :current-year="currentYear"
      :current-month="currentMonth"
      :year-months="yearMonths"
      :month-days="monthDays"
      :week-days="weekDays"
      :time-slots="timeSlots"
      @select-month="handleSelectMonth"
      @select-year-date="handleSelectYearDate"
      @select-month-date="handleSelectMonthDate"
      @choose-time-slot="handleChooseTimeSlot"
      @choose-day-time-slot="handleChooseDayTimeSlot"
      @go-to-day-view="handleGoToDayView"
    />
  </main>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import YearView from './views/YearView.vue'
import MonthView from './views/MonthView.vue'
import WeekView from './views/WeekView.vue'
import DayView from './views/DayView.vue'

// 定义类型
import type { DayData, MonthData } from '@/types/timeData'

interface Props {
  currentView: string
  selectedDate: Date
  currentYear: number
  currentMonth: number
  yearMonths: MonthData[]
  monthDays: DayData[]
  weekDays: any[]
  timeSlots: string[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'select-month': [month: MonthData]
  'select-year-date': [day: DayData]
  'select-month-date': [day: DayData]
  'choose-time-slot': [day: DayData, hourIndex: number, event: MouseEvent]
  'choose-day-time-slot': [hourIndex: number]
  'go-to-day-view': [date: Date]
}>()

const viewComponents: Record<string, any> = {
  year: YearView,
  month: MonthView,
  week: WeekView,
  day: DayView
}

const currentViewComponent = computed(() => {
  return viewComponents[props.currentView] || WeekView
})

// 事件处理器方法
const handleSelectMonth = (month: MonthData) => {
  emit('select-month', month)
}

const handleSelectYearDate = (day: DayData) => {
  emit('select-year-date', day)
}

const handleSelectMonthDate = (day: DayData) => {
  emit('select-month-date', day)
}

const handleChooseTimeSlot = (day: DayData, hourIndex: number, event: MouseEvent) => {
  emit('choose-time-slot', day, hourIndex, event)
}

const handleChooseDayTimeSlot = (hourIndex: number) => {
  emit('choose-day-time-slot', hourIndex)
}

// 处理跳转到日视图
const handleGoToDayView = (date: Date) => {
  emit('go-to-day-view', date)
}
</script>

<style scoped>
.calendar-main {
  flex: 1;
  background: white;
  overflow: hidden;
}
</style>